<template>
  <div>
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :success-text="message"
    >
      <div class="header">
        <van-icon size="16px" name="arrow-left" @click="goback" />
        <div class="title">新房</div>
        <div style="flex: 1" />
        <van-icon size="15px" name="location-o" />
        <div style="font-size: 13px; margin-left: 2px" @click="tobuycity">
          {{ city ? city.slice(0, 3):"" }}
        </div>
      </div>
      <div class="space" />
      <!-- <div class="menu">
        <div class="part">
          <div>
            <img src="@/assets/newindexicon01.png" />
            <span>在售楼盘</span>
          </div>
          <div>
            <img src="@/assets/newindexicon02.png" />
            <span>最新开盘</span>
          </div>
          <div>
            <img src="@/assets/newindexicon03.png" />
            <span>合作楼盘</span>
          </div>
          <div>
            <img src="@/assets/newindexicon04.png" />
            <span>地图找房</span>
          </div>
        </div>
      </div> -->
      <div class="sorthouse" v-if="newhouselist.length!=0">
        <van-sticky :offset-top="46">
          <div ref="screen" class="navtab">
            <div @click="showscreen($event)">
              {{ value1 }}<van-icon size="13" name="arrow-down" />
              <div class="content">
                <van-tree-select
                  :items="items"
                  :active-id.sync="activeId"
                  :main-active-index.sync="activeIndex"
                  @click-item="areachoose"
                />
                <div class="btnarea">
                  <van-button @click="clear">关闭</van-button>
                  <van-button @click="jumptoscreen">确定</van-button>
                </div>
              </div>
            </div>
            <div @click="showscreen($event)">
              {{ value2 }}<van-icon size="13" name="arrow-down" />
              <div class="content">
                <div class="moneybox">
                  <div
                    v-for="item in moneylist"
                    :key="item"
                    ref="moneylist"
                    @click="moenychoose($event)"
                  >
                    {{ item }}
                  </div>
                </div>
                <div class="btnarea">
                  <van-button @click="clear">关闭</van-button>
                  <van-button @click="jumptoscreen">确定</van-button>
                </div>
              </div>
            </div>
          </div>
        </van-sticky>
      </div>
      <div class="newup">
        <div
          v-for="item in newhouselist"
          :key="item.index"
          class="house"
          @click="jumptonewdetail(item.houseId, item)"
        >
          <van-image
            width="121px"
            height="112px"
            lazy-load
            :src="item.image"
            fit="cover"
            radius="5px"
          />
          <div class="intrduce">
            <span class="title1">{{ item.subdistrict }}</span>
            <span class="title2">
              <span>年限:{{ item.propertyTerm }}</span>
              <span v-show="item.plotRatio"
                >容积率:{{ item.plotRatio
                }}<span v-show="item.plotRatio.length == '1'">.0</span></span
              >
              <span v-show="item.greeningRate"
                >绿化率:{{ item.greeningRate }}</span
              >
            </span>
            <span class="tips">
              <span v-for="i in item.houseLabel" :key="i.index">{{ i }}</span>
            </span>
            <span class="title3">{{
              item.sellingPrice
            }}</span>
          </div>
        </div>
        <div v-show="newhouselist.length == '0' && !xinloading" class="nohouse">
          <img src="@/assets/nohouse.png" alt="" />
          <div>暂无房源</div>
        </div>
        <div v-show="xinloading" class="nohouse">
          <img src="@/assets/nohouse.png" alt="" />
          <div>加载中...</div>
        </div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getAreaList } from "@/apis/city";
import { newHousesearch } from "@/apis/house";
import local from "@/utils/local";
import { baseUtils } from "@/utils/baseUtils";
import {
  getGeolocation,
  getChooseCity,
  getChooseCityQualify,
  getHouseListNew,
  setHouseListNew,
} from "@/utils/auth";
import { _local } from "@/utils/storage";
import { addLog } from "@/apis/user";

export default {
  data() {
    return {
      isLoading: true,
      message: "",
      value1: "区域",
      value2: "单价",
      xinloading: true,
      city: "",
      cityCode: "",
      currentPage: "1",
      perPage: "10",
      newhouselist: [],
      searchdata: { currentPage: 1, perPage: 10 },
      activeId: 0,
      activeIndex: 0,
      items: [
        {
          text: "区域",
          children: [],
        },
      ],
      moneylist: [
        "不限",
        "<5000",
        "5000~10000",
        "15000~15000",
        "15000~20000",
        "20000~25000",
        "25000~30000",
        ">30000",
      ],
      arealist: [],
      loading: false,
      screen: true,
    };
  },
  created() {
    this.city = _local.get("city");
    this.cityCode = _local.get("cityCode");
    // const chooseCityQualify = getChooseCityQualify()
    // if (!baseUtils.isEmpty(chooseCityQualify)) {
    //   this.city = chooseCityQualify.city
    //   this.cityCode = chooseCityQualify.cityCode
    // } else {
    //   const geolocation = getGeolocation()
    //   const chooseCity = getChooseCity()
    //   this.city = chooseCity ? chooseCity.city : geolocation.city
    //   this.cityCode = chooseCity ? chooseCity.cityCode : geolocation.cityCode
    // }
    this.getnewHouselist();
    this.getdis();
  },
  mounted() {
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.showScroll);
  },
  methods: {
    onRefresh() {
      newHousesearch({
        currentPage: this.currentPage,
        perPage: this.perPage,
        cityCode: this.cityCode,
      }).then((res) => {
        if (res.code === 201 || res.code == 200) {
          this.newhouselist = res.result.list;
          this.isLoading = false;
          this.message = "刷新成功";
          this.$toast("刷新成功");
          if (this.newhouselist.length === 10) {
            this.loading = true;
          }
        } else {
          this.isLoading = false;
          this.message = "刷新失败";
          this.$toast("刷新失败");
        }
      });
    },
    goback() {
      this.$router.go(-1);
    },
    jumptoscreen() {
      if (this.screen) {
        addLog({
          adcode: _local.get("adCode"),
          code: "click",
          page_name: "新房筛选一级页面",
          system: _local.get("device"),
          uid: _local.get("ryId"),
          describe: `筛选条件:${this.value1},${this.value2},城市:${_local.get(
            "city"
          )}`,
        }).then((res) => {});
        local.set("searchdata", JSON.stringify(this.searchdata));
        this.$router.push({
          path: "/newscreen",
          query: {
            cityCode: this.cityCode,
            value1: this.value1,
            value2: this.value2,
          },
        });
      } else {
        this.$dialog
          .alert({
            message: "当前城市暂未开放新房服务",
            confirmButtonColor: "#45b7cb",
            theme: "round-button",
            messageAlign: "left",
          })
          .then(() => {});
      }
    },
    getnewHouselist() {
      newHousesearch({
        currentPage: this.currentPage,
        perPage: this.perPage,
        cityCode: this.cityCode,
      }).then((res) => {
        console.log(res);
        if (res.code === 201) {
          if (res.result.list.length != 0) {
            this.newhouselist = res.result.list;
            if (this.newhouselist.length === 10) {
              this.loading = true;
            }
          }else{
            this.xinloading=false
          }
        }
      });
    },
    tobuycity() {
      this.$router.push({ path: "/city", query: { city: this.city } });
    },
    clear() {
      this.$refs.screen.children.forEach((v) => {
        v.classList.remove("active");
      });
    },
    showscreen(e) {
      if (e.currentTarget === e.target) {
        if (e.currentTarget.classList[0] === "active") {
          e.currentTarget.classList.remove("active");
        } else {
          this.$refs.screen.children.forEach((v) => {
            v.classList.remove("active");
          });
          e.currentTarget.classList.add("active");
        }
      }
    },
    areachoose(data) {
      this.value1 = data.text.slice(0, 2);
      this.searchdata.adcode = data.id;
    },
    moenychoose(e) {
      this.value2 = e.currentTarget.innerText.slice(0, 2);
      if (e.currentTarget.classList[0] === "mboxactive") {
        e.currentTarget.classList.remove("mboxactive");
      } else {
        this.$refs.moneylist.forEach((e) => {
          e.classList.remove("mboxactive");
        });
        if (e.target.innerText === "<5000") {
          this.searchdata.priceMin = "1";
          this.searchdata.priceMax = "5000";
        } else if (e.target.innerText === "5000~10000") {
          this.searchdata.priceMin = "5000";
          this.searchdata.priceMax = "10000";
        } else if (e.target.innerText === "10000~15000") {
          this.searchdata.priceMin = "10000";
          this.searchdata.priceMax = "15000";
        } else if (e.target.innerText === "15000~20000") {
          this.searchdata.priceMin = "15000";
          this.searchdata.priceMax = "20000";
        } else if (e.target.innerText === "20000~25000") {
          this.searchdata.priceMin = "20000";
          this.searchdata.priceMax = "25000";
        } else if (e.target.innerText === "25000~30000") {
          this.searchdata.priceMin = "25000";
          this.searchdata.priceMax = "30000";
        } else if (e.target.innerText === ">30000") {
          this.searchdata.priceMin = "30000";
          this.searchdata.priceMax = "100000000000";
        } else if (e.target.innerText === "不限") {
          this.searchdata.priceMin = "1";
          this.searchdata.priceMax = "100000000000";
        }
        e.currentTarget.classList.add("mboxactive");
      }
    },
    jumptonewdetail(e, item) {
      const list = getHouseListNew();
      for (let i = 0; i < list.length; i++) {
        if (list[i].houseId === item.houseId) {
          list.splice(i, 1);
        }
      }
      list.unshift(item);
      setHouseListNew(list);
      this.$router.push({ path: "/newhousedetail", query: { newHouseId: e } });
    },
    async getdis() {
      await getAreaList({
        citycode: _local.get("cityCode"),
      }).then((res) => {
        console.log("getAreaList", res);
        if (
          this.city === "上海市" ||
          this.city === "北京市" ||
          this.city === "天津市" ||
          this.city === "重庆市"
        ) {
          this.arealist = res.result.list.slice(1);
          this.arealist.forEach((e) => {
            const obj = {};
            obj.text = e.name;
            obj.id = e.adcode;
            this.items[0].children.push(obj);
          });
        } else {
          this.arealist = res.result.list.slice(2);
          this.arealist.forEach((e) => {
            const obj = {};
            obj.text = e.name;
            obj.id = e.adcode;
            this.items[0].children.push(obj);
          });
        }
      });
    },
    showScroll() {
      const scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      const windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      const scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop + windowHeight >= scrollHeight - 20 && this.loading) {
        this.currentPage++;

        newHousesearch({
          cityCode: this.cityCode,
          currentPage: this.currentPage,
          perPage: this.perPage,
        }).then((response) => {
          if (response.result.list.length !== 10) {
            this.xinloading = false;
          }
          this.newhouselist = [...this.newhouselist, ...response.result.list];
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.header {
  position: fixed;
  left: 0;
  top: 0;
  padding: 10px 15px;
  z-index: 1000;
  background-color: #fff;
  width: 100%;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 15px;
  .title {
    line-height: 25px;
    height: 25px;
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
    span {
      line-height: 25px;
      height: 25px;
      display: inline-block;
      font-size: 11px;
      color: #ccc;
      margin-left: 5px;
    }
  }
}
.space {
  height: 50px;
}
.banner {
  box-sizing: border-box;
  padding: 10px 15px;
  img {
    width: 100%;
  }
}
.menu {
  margin-bottom: 10px;
  padding: 0 15px;
  .part {
    background-color: #fff;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px 0;
    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 15px;
      color: #333;
      img {
        margin-bottom: 5px;
        width: 40px;
        height: 40px;
      }
    }
  }
}
.navtab {
  background-color: #fff;
  height: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  font-size: 14px;
  .content {
    background-color: #fff;
    position: absolute;
    width: 100%;
    top: 40px;
    left: 0;
    z-index: 100;
    color: #000;
    display: none;
    .btnarea {
      .van-button {
        font-size: 16px;
        &:first-child {
          width: 35%;
          background-color: #fff;
          border: none;
        }
        &:last-child {
          width: 65%;
          background-color: #46b8cb;
          color: #fff;
        }
      }
    }
    .moneybox,
    .sortbox {
      text-align: center;
      font-size: 14px;
      div {
        height: 40px;
        line-height: 40px;
      }
      .mboxactive {
        color: #46b8cb;
      }
    }
  }
  .active {
    color: #d43b33;
    .content {
      display: block;
    }
  }
}
.house {
  background-color: #fff;
  margin: 0 15px;
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #f1f1f1;
  img {
    width: 121px;
    height: 112px;
    min-width: 121px;
    max-width: 121px;
    border-radius: 5px;
  }
  .intrduce {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 10px;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    .title1 {
      font-size: 16px;
      font-weight: 550;
      color: #333333;
    }
    .title2 {
      font-size: 12px;
      color: #a0a0a0;
      span {
        margin: 0 2px;
      }
    }
    .tips {
      span {
        font-size: 10px;
        display: inline-block;
        margin-right: 5px;
        padding: 3px;
        border: 0;
        background-color: #ebfafd;
        color: #5eb9d0;
        border-radius: 5px;
      }
    }
    .title3 {
      color: #d43b33;
      font-size: 16px;
      font-weight: bold;
      span {
        font-size: 12px;
        margin-left: 3px;
      }
    }
  }
}
.nohouse {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    margin-top: 20px;
    width: 200px;
  }
  div {
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-top: 20px;
  }
}
</style>
